前端开发工具：gulp常用指令以及操作

gulp使用：
1.创建项目;
2.打开cmd,进入项目目录;
3.新建package.json文件,指令cnpm init。如果没有出错，可能不存在cnpm指令,
可以通过指令npm install cnpm -g --registry=https://registry.npm.taobao.org
添加,或者直接用npm(容易出现异常);
4.项目中安装gulp,指令cnpm install gulp --save-dev;
5.安装项目中所要用到的插件,常用的有如下
(1)sass的编译(gulp-sass)
(2)自动添加css前缀(gulp-autoprefixer)
(3)压缩css(gulp-minify-css)
(4)js代码校验(gulp-jshint)
(5)合并js文件(gulp-concat)
(6)压缩js代码(gulp-uglify)
(7)压缩图片(gulp-imagemin)
(8)自动刷新页面(gulp-livereload)
(9)图片缓存，只有图片替换了才压缩(gulp-cache)
(10)更改提醒(gulp-notify)
(11)less的编译(gulp-less)
可以一键安装上面所以插件，指令：
cnpm install gulp-less gulp-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev
也可以单独安装你想要的,指令cnpm install <对应插件> --save-dev;
6.创建gulpfile.js文件

我在这个项目中用了sass的编译,js代码校验,自动刷新页面插件,同时安装容易出错,最好分步,指令：
cnpm install gulp-sass  gulp-livereload --save-dev;
cnpm install jshint(安装代码检查同时要加上，不然后面会报错) gulp-jshint --save-dev;
cnpm install gulp-livereload --save-dev;

接下来写gulpfile.js,先来写sass编译:
var gulp=require('gulp'),
s
8e54
ass=require('gulp-sass');//请求sass插件,安装时的插件名
gulp.task('compile-sass',function (){
gulp.src('scss/*.scss')//scss所在目录
.pipe(sass())
.pipe(gulp.dest('css'));//生成css文件的文件夹
});
命令执行：gulp compile-sass;compile-sass对应上面代码中的

同样,js代码检测也是这样。
最后是自动刷新,代码：
gulp.task('watch',function (){
livereload.listen();
gulp.watch('scss/*.scss',['compile-sass']);//监听所有scss文件,compile-sass对应上面
gulp.watch('js/*.js',['jsLint']);//监听所有js文件,jsLint对应
});

三者代码合并后,输入命令：gulp watch;watch也是对应代码中的
这样就可以实时检测了,scss文件保存后自动编译成css文件,js文件有错误会在cmd里提示。
其他插件的使用一样,先安装对应插件,然后把代码放到gulpfile.js中,网上很多代码复制即可。
实时更新网页需要安装插件,这里没有做,可参照http://www.ydcss.com/archives/702去弄