前端工具

最新推荐文章于 2024-09-14 22:18:26 发布

anleng6817

最新推荐文章于 2024-09-14 22:18:26 发布

阅读量99

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/jffun-blog/p/8352725.html

版权

安装 Node.js

直接下载，安装

gulp

https://www.gulpjs.com.cn/

全局安装 gulp（'-g': 全局安装）
npm install gulp -g
下载要用到的插件（'-g': 全局安装）
npm install gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-livereload gulp-rename -g
添加一个 gulp 的依赖

npm install gulp --save-dev

项目依赖分两种，一个就是普通的项目依赖比如 bootstrap（--save），还用一种只是开发阶段需要用的，这种属于开发依赖比如 gulp，开发依赖最终记录在 devDependencies 节点里面 (--save-dev)

压缩 css（gulp-minify-css）

js 代码校验（gulp-jshint）

合并 js 文件（gulp-concat）

压缩 js 代码（gulp-uglify）

压缩图片（gulp-imagemin）

文件重命名（gulp-rename）

自动刷新页面（gulp-livereload）

更改提醒（gulp-notify）
合并 js 顺序（gulp-order）
构建 gulpfile.js
在项目的根目录，新建一个 gulpfile.js 的文件，这个是 gulp 的主执行文件，且文件名是固定的，不能修改，gulp 命令执行的时候，会去找这个文件。
执行 gulp

gulp输入 gulp 即可

gulpfile.js：

//引入插件
var gulp = require('gulp'),
   // minifycss = require('gulp-minify-css'),
   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(concat('empty_dimension.js'))  //合并js文件，empty_dimension.js为合并的文件名称
       .pipe(gulp.dest('dist'))  //合并后文件存放位置
       .pipe(rename({
           suffix: '.min'
       }))
       .pipe(uglify())         //执行压缩任务
       .pipe(gulp.dest('dist'))  //压缩后文件存放位置
       .pipe(notify({    //操作结束后提示
           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);
});

转载于:https://www.cnblogs.com/jffun-blog/p/8352725.html