使用Gulp实现前端构建自动化
安装
一.安装NodeJs
Gulp的安装依赖于NodeJs的npm安装管理器
安装包下载地址
关于npm命令:
1. npm install <name>
会把插件安装到node_modules目录中
2. 参数 --save
会在package.json的dependencies属性下添加该插件
3. 参数 --save-dev:
会在package.json的devDependencies属性下添加添加该插件
4. 参数 -g
全局安装插件
4. npm install
会安装package.json下dependencies和 devDependencies声明的插件
5. 使用原则:
运行时需要用到的包使用--save，否则使用--save-dev。
二.安装Gulp
- 执行
npm init初始化package.json ————便于共同开发时安装插件 - 执行
npm install -save gulp
三.Gulp的使用
1.在项目根目录下创建一个gulpfile.js文件
2.在gulpfile.js文件下引入gulp
var gulp = require('gulp');
3.创建默认任务
//执行 gulp 会默认执行该任务
gulp.task('default', function() {
});
4.文件移动指令
//目标文件
gulp.task('movecss', function() {
gulp.src('*.css')//指定源文件
.pipe(
gulp.dest('minicss')//输出到指定的目录 若该目录不存在会自动创建
);
});
5.监听文件变化执行一些操作
//目标文件
gulp.task('watchjs', function() {
gulp.watch('main.js', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
});
6.在一个task下引用其他task
//多个task
gulp.task('tasks', ['movecss','watchjs'], function() {
console.log('last task');
});
//会按顺序执行
gulp.task('default', ['movecss', 'watchjs']);
四.常用插件
1.压缩CSS---gulp-minify-css
安装:
npm install gulp-minify-css --save-dev
用法:
//引入gulp-minify-css
var cssminify = require('gulp-minify-css');
//压缩css 并移动到指定的文件夹
gulp.task('cssmin', function () {
gulp.src('*.css')
.pipe(cssminify())
.pipe(gulp.dest('minicss'));
});
2.压缩js---gulp-minify
安装:
npm install --save-dev gulp-minify
用法:
//压缩js
gulp.task('compress', function () {
gulp.src('*.js')
.pipe(minify({
ext:{
src:'-debug.js',//源文件的扩展名
min:'-min.js' //压缩过的文件的扩展名
},
exclude: ['folder'], //排除的目录
ignoreFiles: ['gulpfile.js'] //不压缩的文件
}))
.pipe(gulp.dest('minijs'))
});
3.gulp-clean
安装:
npm install --save-dev gulp-clean
用法:
//清除文件
gulp.task('clean-mini-js', function () {
return gulp.src('minijs', {read: false})
.pipe(clean());
});
其他常用插件
- gulp-manifest
- run-sequence
- gulp-exec
- gulp-css-urls
- gulp-minify-css
- gulp-htmlmin
- gulp-imagemin
- gulp-uglify
- gulp-concat
- gulp-rename