gulp入门

时间  2019-11-15
标签 gulp 入门 栏目 JavaScript 繁體版
原文   原文链接

参考文章：javascript

                   gulp官网  https://www.gulpjs.com.cn/docs/getting-started/css

                 《Gulp 入门指南》- 前言  https://github.com/onface/blog/issues/19 （查看此文章，可快速入门）html

                    UglifyJS2（https://github.com/mishoo/UglifyJS2）（uglifyJs使用指南）前端

gulp 是 Web 前端自动化开发的工具。要使用gulp必须先安装node.js，gulp基于node.js实现自动化工具。java

  • 使用 gulp 压缩 JS（min版）
  • 使用 gulp 压缩 CSS
  • 使用 gulp 压缩图片
  • 使用 gulp 压缩html
  • 使用 gulp 编译 LESS
  • 使用 gulp 编译 Sass
  • 使用 gulp 构建一个项目

安装：node

npm install gulp

--查看是否安装成功
gulp -v

 

使用 gulp 压缩 JS

若是要压缩css,js文件须要用到uglify.js（压缩，混淆），不然会出现module.js throw error. git

在npm最后可加入参数 -g， 区别在于，-g可在command line 中直接使用github

npm install gulp-uglify

安装完毕后，在项目下创建gulpfile.js文件，gulp 的全部配置代码都写在 gulpfile.js 文件。web

在执行gulp文件时，gulp会自动查找gulpfile.js文件。chrome

node.js中引入module模块，gulp和 gulp-uglify

var gulp = require('gulp');
var uglify = require('gulp-uglify')

 建立task任务,取名script：

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

在命令行进入gulpfile.js所在文件夹目录，执行:

gulp [taskname] .....

gulp script

若是文件修改后，每次执行命令会很麻烦，所以能够创建监听。

gulp.watch('js/*.js', ['script']);

将这个监听放入到task中，执行gulp auto 便可开启自动监听。除非退出控制台【ctrl+c】，中止监听。

// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
    // 监听文件修改，当文件被修改则执行 script 任务
    gulp.watch('js/*.js', ['script'])
})

默认任务名为 default ，即 

gulp.task('default',function(){
    //todo
});

// 或
gulp.task('default', ['script', 'auto']);

执行时，直接输入gulp便可。

JS 完整压缩代码：

// 获取 gulp
var gulp = require('gulp')

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

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

// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
    // 监听文件修改，当文件被修改则执行 script 任务
    gulp.watch('js/*.js', ['script'])
})


// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 script 任务和 auto 任务
gulp.task('default', ['script', 'auto'])

异常：

GulpUglifyError: unable to minify JavaScript

 若是在执行中出现以上错误，说明js文件有错，致使没法压缩。查看信息的话，修改代码：

.pipe(uglify().on("error", function(error){
            console.log(error);
　　　　　　  this.emit('end'); //终止
        }))

 

便可查看错误起因，进行修改。 

 

使用 gulp 压缩 CSS

css文件压缩，要使用另外一个module ：gulp-clean-css     gulp-minify-css（被废除） 

npm install gulp-clean-css

 

 JS完整压缩代码：

// 获取 minify-css 模块（用于压缩 CSS）
var minifyCSS = require('gulp-minify-css')

// 压缩 css 文件
// 在命令行使用 gulp css 启动此任务
gulp.task('css', function () {
    // 1. 找到文件
    gulp.src('css/*.css')
    // 2. 压缩文件
        .pipe(minifyCSS())
    // 3. 另存为压缩文件
        .pipe(gulp.dest('dist/css'))
})

// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
    // 监听文件修改，当文件被修改则执行 css 任务
    gulp.watch('css/*.css', ['css'])
});

 

使用 gulp 压缩 Image

img图片压缩，要使用到的工具 gulp-imagemin：

npm install gulp-imagemin

 

Js压缩代码：
// 获取 gulp-imagemin 模块
var imagemin = require('gulp-imagemin')

// 压缩图片任务
// 在命令行输入 gulp images 启动此任务
gulp.task('images', function () {
    // 1. 找到图片
    gulp.src('images/*.*')
    // 2. 压缩图片
        .pipe(imagemin({
            progressive: true
        }))
    // 3. 另存图片
        .pipe(gulp.dest('dist/images'))
});

// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
    // 监听文件修改，当文件被修改则执行 images 任务
    gulp.watch('images/*.*)', ['images'])
});

使用 gulp 压缩html

 安装gulp-htmlmin

npm install gulp-htmlmin –save-dev

说明：–save-dev 保存配置信息至 package.json 的 devDependencies 节点。

仅可处理html内容 js和css会保存原样输出，但会剔除空白行。

注意：header中出现的注释 <!-- ** -->会影响编辑，报错。

var  htmlmin = require('gulp-htmlmin');

gulp.task('testHtmlmin', function () {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除全部空格做属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    gulp.src('src/html/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dist/html'));
});

 

使用 gulp 合并压缩 html

安装gulp-useref：

npm install --save gulp-useref

useref仅合并代码（剔除注释）不作压缩，所以能够将上面的几个整合进去。

使用：

var useref = require('gulp-useref');


gulp.task('html', function () {
    return gulp.src('app/*.html')
        .pipe(useref())
        .pipe(gulpif('*.js', uglify()))
        .pipe(gulpif('*.css', minifyCss()))
        .pipe(gulp.dest('dist'));
});

 使用gulp 建立 web项目

 首先建立web项目的项目文件夹。

而后进入，执行如下命令建立package.json文件。

npm init

 

其中会提示填写 name，version ,  description ,git等信息。

若是出现错误：Sorry, name can no longer contain capital letters.不能输入大写字母

顺着一路走下去，就会生成package.json文件。

package.json文件中加入gulp模块。--save-dev 将gulp保存到package.json文件中。

npm install --save-dev gulp

 

 执行完毕后，会在项目下有个文件夹 node_modules。用于存放node 模块，全部安装的模块会被安装在此文件夹下。

同时安装相关的模块。

npm install gulp-uglify --save-dev

 

 package.json文件中会自动记录dependencies。这样联合开发时，咱们不须要提交node_modules文件里面的内容。

相关开发者只需下载package.json.执行 npm install 就会自动将相关文件下载到本地。和maven的lib管理同样。

此时建立文件结构：

|-src
　　|-html
　　|-img
　　|-css
　　|-js
|-dist

src用于存放开发用代码，dist用于存放发布后代码。

※若是有 less sass typescript文件都放在src下。

 在src下建立demo index.html  index.js  index.css img文件。

而后引入 gulpfile.js作自动化部署用。

gulp-util 已经被标注为@Declared 不被推荐所以，就不引入了。

加入gulp-uglify压缩JS模块，到gulpfile.js中。

var gulp = require('gulp');
var uglify  = require('gulp-uglify');

/**
 * js 压缩
 */
gulp.task('js', function(){
    gulp.src('src/js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

gulp.task('auto', function(){
    gulp.watch('src/js/*.js', ['js']);
});

gulp.task('default', ['js','auto']);

 

>gulp

 

此时，修改index.js文件，gulp.watch会当即监控到js文件夹下有文件变动，从而执行'js'任务。可是咱们每改个文件都全量发布一次，不是咱们想要的，咱们但愿增量发布。

引入  gulp-watch-path 模块

npm install gulp-watch-path --save-dev

 

此模块可作增量发布，解决咱们上面提到的困境。

如下代码中被注释的部分，是为了说明对象的主要结构。

var watchpath = require('gulp-watch-path');

gulp.watch('src/js/*.js', function(event){
        /*  event对象结构
        event {
            type: 'changed', 
            path: '/Users/nimojs/Documents/code/gulp-book/demo/chapter7/src/js/log.js'
        }
        */
        var paths = watchpath(event, 'src/', 'dist/');
        /*
        paths  paths对象结构
            { srcPath: 'src/js/log.js',
              srcDir: 'src/js/',
              distPath: 'dist/js/log.js',
              distDir: 'dist/js/',
              srcFilename: 'log.js',
              distFilename: 'log.js' }
        */  
       console.log("eventType: " + event.type);
       console.log("srcFilename: " + paths.srcFilename);
       gulp.src(paths.srcPath)
           .pipe(uglify())
           .pipe(gulp.dest(paths.distDir));
    });

 

同时，当咱们在执行统一执行时，若是其中有的js有问题，会致使报错且执行被终止，报出的错又无法找出缘由，须要手动在uglify中添加监听error事件并打印查看问题。

咱们更多时候但愿对于出错的地方，跳过继续执行，最后再单独处理错误文件作增量修改便可。

引入 stream-combiner2 模块

此模块能够记录打印错误log日志，同时不会中断执行。

npm install stream-combiner2 --save-dev

 

combiner将要执行的编辑拆分开，用于在内部组合。

var combiner = require('stream-combiner2');

var logFn = function(er){
    /**
         er {
             message: '',
            fileName: '',
             plugin: '',
             lineNumber: ''
               }
    */
    console.error("Error!");
    console.error("er  plugin:  " + er.plugin);
    console.error("er  fileName:  " + er.fileName);
    console.error("er  lineNumber:  " + er.lineNumber);
    console.error("er  message:  " + er.message);
}

---------------------------------------------------------------
// 将 watch 中的 src部分变为如下结构。

 combiner.obj([
               gulp.src(paths.srcPath),
                   uglify(),
                   gulp.dest(paths.distDir) 
           ]).on('error', logFn);

 

修改index.js使其语法报错。执行后结果：

当咱们运行index.html进行调试时，会发现因压缩后js已经没法辨认，致使没法调试。

引入  gulp-sourcemaps 模块

gulp-sourcemaps模块可作代码映射，就如同eclipse中class映射到java类上同样。

npm install gulp-sourcemaps --save-dev

 

在进行uglify以前注入sourcemaps，在以后加入转变

var sourcemaps = require('gulp-sourcemaps');

// 在watch部分修改
       combiner.obj([
               gulp.src(paths.srcPath),
                   sourcemaps.init(),
                   uglify(),
                   sourcemaps.write("./"),
                   gulp.dest(paths.distDir) 
           ]).on('error', logFn);

 

index.js修改后，会在dist/js下生成相对应的.map文件进行映射，在chrome浏览器下自动绑定。

对于css文件，咱们对于一个样式要兼容不一样浏览器内核的不一样写法，非常不便。

引入 gulp-autoprefixer 模块

自动补齐不一样浏览器内核的写法，这样咱们只须要按标准写法便可。

>npm install gulp-minify-css --save-dev
>npm install gulp-autoprefixer --save-dev

 

添加如下代码：

var minifycss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('css', function(){
    gulp.src('src/css/*.css')
        .pipe(autoprefixer({ browsers: 'last 2 versions'}))
        .pipe(minifycss())
        .pipe(gulp.dest('dist/css'));
});

 

则会在dist的css文件中,自动添加：

src/css

#container{
display: flex;
}

----------------------------

dist/css

#container{display:-webkit-box;display:-ms-flexbox;display:flex}

对非css,js文件直接进行搬迁，如font文件

gulp.task('copy',function(){
    gulp.src('src/font/*')
    .pipe(gulp.dest('dist/font/'));
});
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程