前端开发工具：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'),sass=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去弄