使用Gulp实现前端构建自动化

使用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

1. 执行 npm init 初始化package.json ————便于共同开发时安装插件
   
2. 执行 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

Github--本文代码

参考连接:

加速npm install 方法

Gulp中文网

npm 安装相关知识

gulp-minify-css

gulp-minify

gulp-clean