gulp基于node
1、全局安装gulp:
$ npm install --global gulp
2、前往项目目录,然后安装作为项目的开发依赖(devDependencies):
$ npm install --save-dev gulp
3. 在项目根目录下创建一个名为 gulpfile.js 的文件:
1 var gulp = require('gulp'); 2 3 gulp.task('default', function() { 4 // 将你的默认的任务代码放在这 5 console.log("hello gulp"); 6 });
4、运行gulp:
$ gulp
默认运行名为 default 的任务(task),在这里,这个任务打印"hello gulp"。
想要单独执行特定的任务(task)输入:gulp 任务名。
生成项目所需信息文件package.json:
输入命令npm init,一路按enter完成后自动生成package.json文件。
示例代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 var gulp = require('gulp'), 2 uglify = require('gulp-uglify'), 3 concat = require('gulp-concat'), 4 rename = require('gulp-rename'), 5 cssnano = require('gulp-cssnano'), 6 image = require("gulp-image"), 7 del = require('del'), 8 less = require('gulp-less'); 9 10 //压缩css,压缩后的文件放入dest/css 11 gulp.task('minifycss', function() { 12 return gulp.src('css/*.css') 13 .pipe(cssnano()) //压缩 14 .pipe(gulp.dest('dest/css'));//输出 15 }); 16 //合并并压缩css,合并压缩后的文件放入dest/css 17 gulp.task('concatminifycss', function() { 18 return gulp.src('css/*.css') 19 .pipe(concat('main.css')) //合并所有css到main.css 20 //.pipe(gulp.dest('dest/css')) //输出main.css到文件夹 21 //.pipe(rename({suffix: '.min'})) //rename压缩后的文件名 22 .pipe(cssnano())//压缩 23 .pipe(gulp.dest('dest/css'));//输出 24 }); 25 26 //压缩js,压缩后的文件放入dest/js 27 gulp.task('minifyjs', function() { 28 return gulp.src('js/*.js') 29 .pipe(uglify())//压缩 30 .pipe(gulp.dest('dest/js'));//输出 31 }); 32 33 //合并并压缩js,合并压缩后的文件放入dest/js 34 gulp.task('concatminifyjs', function() { 35 return gulp.src('js/*.js') 36 .pipe(concat('main.js')) //合并所有js到main.js 37 .pipe(gulp.dest('dest/js')) //输出main.js到文件夹 38 .pipe(rename({suffix: '.min'})) //rename压缩后的文件名 39 .pipe(uglify())//压缩 40 .pipe(gulp.dest('dest/js'));//输出 41 }); 42 43 //压缩图片,压缩后的文件放入dest/images 44 gulp.task('image',function(){ 45 gulp.src('images/*.+(jpg|png|gif|svg)') 46 .pipe(image())//压缩 47 .pipe(gulp.dest('dest/images'));//输出 48 }); 49 50 //执行压缩前,先删除dest文件夹里的内容 51 gulp.task('clean', function(cb) { 52 del(['dest/*'], cb) 53 }); 54 55 //编译less到css 56 gulp.task("less",function(){ 57 gulp.src('css/*.less') 58 .pipe(less()) 59 .pipe(gulp.dest("dest/css")); 60 61 }); 62 //监视文件的变化 63 gulp.task("watch",function(){ 64 gulp.watch("css/*.less",['less']); 65 66 }); 67 68 //默认命令,在cmd中输入gulp后,执行的就是这个命令 69 gulp.task('default', function() { 70 // 将你的默认的任务代码放在这 71 gulp.start('clean','concatminifycss','image','concatminifyjs'); 72 });
安装项目所需自动化插件:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 #安装gulp-uglify 2 npm install gulp-uglify --save-dev 3 #安装gulp- image 4 npm install gulp-image --save-dev 5 #安装gulp-cssnano 6 npm install gulp-cssnano --save-dev 7 #安装del 8 npm install del --save-dev
淘宝NPM镜像:
npm install -g cnpm --registry=https://registry.npm.taobao.org
注:mac系统要在前面加sudo