轻松使用gulp

gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它可以极大的提升开发效率。 在 Web 前端开发工做中有不少“重复工做”，好比压缩CSS/JS文件。而这些工做都是有规律的。找到这些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工做”。

1.安装

//全局安装
npm install -g gulp
或
cnpm install -g gulp复制代码

2.在工程中生成package.json文件

npm init复制代码

3.在工程中安装gulp

npm install  gulp --save-dev
或
cnpm install  gulp --save-dev复制代码

4.在工程的根目录下建立gulpfile.js文件

5.gulp使用前的准备

5.1安装须要使用的各类插件（基于gulp的插件 如压缩js能够使用gulp-uglify插件，压缩css，html，images等插件）

5.2在 gulpfile.js 中编写代码

// 获取 gulp
var gulp = require('gulp')复制代码

require() 是 node （CommonJS）中获取模块的语法。

在 gulp 中你只须要理解 require() 能够获取模块。

5.3获取 gulp-uglify 组件

// 获取 uglify 模块（用于压缩 JS）
var uglify = require('gulp-uglify')复制代码

5.4建立压缩任务

// 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('script',//任务名 function() {
    // 1\. 找到指定文件
    gulp.src('js/index.js')
    // 2\. 压缩文件
        .pipe(uglify())
    // 3\. 另存压缩后的文件地址
        .pipe(gulp.dest('dist/js'))
})


在gulp4以上，写成

// 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('script',async //异步处理 function() {
    // 1\. 找到指定文件
    gulp.src('js/index.js')
    // 2\. 压缩文件
        .pipe(uglify())
    // 3\. 另存压缩后的文件地址
        .pipe(gulp.dest('dist/js'))
})复制代码

以上为压缩js文件，其余操做步骤和上面相似。

6.进行gulp操做

$ gulp 任务名复制代码

注意：gulp4以上若是须要同时压缩多个文件，除了在回调函数前面加async异步处理外，执行以下操做

gulp.task("新的任务名",gulp.series("任务名1","任务名2",....,"任务名n",function(){

console.log("hello");

});复制代码

多个文件同时压缩时，能够不传任务名运行

$ gulp复制代码

若是一个文件夹下有多个文件须要处理，能够进行批量操做

// 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('script',async //异步处理 function() {
    // 1\. 找到指定文件
    gulp.src('js/*.js') //*表示js文件夹下后缀名为js的文件所有压缩
    // 2\. 压缩文件
        .pipe(uglify())
    // 3\. 另存压缩后的文件地址
        .pipe(gulp.dest('dist/js'))
})复制代码

以上为js批量压缩，其余批量压缩与其相似。