码迷,mamicode.com
首页 > 其他好文 > 详细

gulp

时间:2017-05-05 23:05:45      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:noi   mini   notify   校验   顺序   链式   let   dir   lis   

三、安装必要的Gulp插件

  • 压缩css(gulp-minify-css)
  • js代码校验(gulp-jshint)
  • 合并js文件(gulp-concat)
  • 压缩js代码(gulp-uglify)
  • 压缩图片(gulp-imagemin)
  • 文件重命名 (gulp-rename)
  • 自动刷新页面(gulp-livereload)
  • 更改提醒(gulp-notify)
  • 合并js顺序(gulp-order)( https://github.com/sirlantis/gulp-order)
$  npm install gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-livereload gulp-rename --save-dev

安装完后 package.json文件内容如下:

  {
"name": "goodgis",
"version": "1.0.0",
"description": "",
"main": "main.js",
"directories": {
  "test": "test"
},
"dependencies": {
  "gulp": "^3.9.0"
},
"devDependencies": {
  "gulp": "^3.9.0",
  "gulp-concat": "^2.6.0",
  "gulp-imagemin": "^2.4.0",
  "gulp-jshint": "^2.0.0",
  "gulp-livereload": "^3.8.1",
  "gulp-minify-css": "^1.2.1",
  "gulp-notify": "^2.2.0",
  "gulp-rename": "^1.2.2",
  "gulp-uglify": "^1.5.1",
  "jshint": "^2.8.0"
},
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
  }

四、根目录下创建gulpfile.js文件

代码如下,作用看注释

//引入插件
   var gulp = require(‘gulp‘),
       // minifycss = require(‘gulp-minify-css‘),
       jshint = require(‘gulp-jshint‘), //代码验证检查
       uglify = require(‘gulp-uglify‘), //压缩js代码
       rename = require(‘gulp-rename‘), //文件重命名
       concat = require(‘gulp-concat‘), //合并js文件
       notify = require(‘gulp-notify‘), //更改提醒
       livereload = require(‘gulp-livereload‘); //自动刷新页面

   //js代码校验、合并和压缩(类似jquery的链式操作,牛)
   gulp.task(‘scripts‘, function() {
       return gulp.src(‘src/**/*.js‘) //源文件
           .pipe(jshint(‘.jshintrc‘)) //1、校验JS文件,jshint校验规则
           .pipe(jshint.reporter(‘default‘)) 
           .pipe(concat(‘goodgis.js‘))  //2、合并js文件,goodgis.js为合并的文件名称
           .pipe(gulp.dest(‘dist‘))  //合并后文件存放位置
           .pipe(rename({
               suffix: ‘.min‘
           }))
           .pipe(uglify())         //3、执行压缩任务
           .pipe(gulp.dest(‘dist‘))  //压缩后文件存放位置
           .pipe(notify({    //4、操作结束后提示
               message: ‘Scripts task complete‘
           }));
   });
   // 默认任务,这里完全可以是多个任务,比如压缩CSS,压缩图片,压缩js等
   gulp.task(‘default‘,[‘watch‘], function() {
       gulp.start(‘scripts‘);
   });
   // 监听(前端自动化的情怀)
   gulp.task(‘watch‘, function() {
       // 监听 .js文件改动,一旦改动就会自动压缩合并
       gulp.watch(‘src/**/*.js‘, [‘scripts‘]);
       // Create LiveReload server(用来自动刷新浏览器)
       livereload.listen();
       // Watch any files in dist/, reload on change
       gulp.watch([‘dist/**‘]).on(‘change‘, livereload.changed);
   });

gulp

标签:noi   mini   notify   校验   顺序   链式   let   dir   lis   

原文地址:http://www.cnblogs.com/luyingying/p/6815099.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!