前端工具Gulp的学习

   很久以前就听说过，如果想在做好一个真正的web前端工程师，必须要会自动化构建工具。比如Grunt,Gulp,webpack。总听大神说用这些工具来构建一个自动化的前端环境，什么文件压缩，文件合并，js语法检查，css自动添加前缀，编译less/sass，自动刷新页面，文件重命名等。配置好文件后，一个命令就能让整个流程跑起来。想想也是多么的炫酷，于是，带着种种疑问，从上周就开始了对Gulp的学习，一周时间算是对Gulp有个入门的了解了，也踩了不少坑。

   先搭建一个环境吧。准备步骤。（直接口述了，就不放图了。）

    1，到nodejs官网下载一个nodejs安装程序，然后安装nodejs，点击默认安装就行了。此时，会自动给系统添加一个环境变量，因此在系统的Path环境变量中就会有nodejs的安装路径，如果没有，自己手动添加即可。

    2，由于现在nodejs都集成了npm，因此，打开命令行工具后，依次输入 node -v  ,  npm -v 看看是否能够成功打印出 版本号，如果觉得npm版本过低，可以 用 npm i npm -g更新。i是install的缩写。此外还可以用   npm config get prefix 找到npm的安装路径。

    3，全局安装 gulp， npm install gulp -g  ,安装完成后，gulp就安装在了npm下面的node_modules文件夹下。

    4，增加系统NODE_PATH的环境变量，一般都是在    C:\Users\Administrator(这个根据你你自己的定)\AppData\Roaming\npm\node_modules。

    5，设置完成后，cmd中输入 gulp -v ,如果能够正确输出版本号，说明下载gulp成功，环境配置也成功了。

    6，实战demo了。此时我们找个位置，比如桌面上，新建一个文件夹，建好目录结构。比如取名  gulp-demo，完后我们cd desktop/gulp-demo,就进入了gulp-demo项目了。首先，我们输入命令npm init,一路enter,该命令会保存我们的所用到的以及配置的信息。方便我们在另一个环境上按照上面的信息来安装包。然后我们需要在本地，也就是在项目内安装gulp以及各种模块。       npm i gulp --save-dev     （--save就会将模块信息保存到package.json中）  。

再在根目录新建一个gulpfile.js文件，来配置我们的任务。

    7，文件合并，文件压缩，语法检查，监听文件变化。先搞这四个吧。

    

var gulp = require('gulp');
var jshint = require('gulp-jshint');//语法检查
var concat = require('gulp-concat');//合并文件
var uglify = require('gulp-uglify');//压缩代码
var rename = require('gulp-rename');//重命名
// 语法检查
gulp.task('jshint', function () {
return gulp.src('public/javascripts/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// 合并文件之后压缩代码
gulp.task('minify', function (){
return gulp.src('public/javascripts/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('public/javascripts/dist'))
.pipe(uglify())
.pipe(rename('all.min.js'))
.pipe(gulp.dest('public/javascripts/dist'));
});
// 监视文件的变化
gulp.task('watch', function () {
gulp.watch('public/javascripts/*.js', ['jshint', 'minify']);
});
// 注册缺省任务
gulp.task('default', ['jshint', 'minify', 'watch']);

 

 由于本人也还刚处于入门阶段，如果有不对的地方，希望批评与指教。3q。