Project uses gulp configuration notes

Node Environment

By node.js download the installation package site installation node.js, npm will be installed together

node --version # 查看node.js版本
npm --version #查看npm版本
npx --version 

Taobao configuration command npm mirror

npm config set registry https://registry.npm.taobao.org
npm config get registry #验证命令
npm config list #列出当前npm的配置列表

Locate the project directory

Enter the command line tool to the working directory of the project, such as the windows system, my project directory is D:/workspace/nodejs/gulpstartunder

cmd command is:

cd D:
cd workspace/nodejs/gulpstart
dir # 列出当前目录的文件

After the successful entry into the project directory, we start the installation gulp.

Installation gulp

NPM is based on the node's command line package management tool, it can be a program module installed node to the project, you can view and search all available program modules in its official website.

If not named in the project directory package.jsonfile, via

npm init

Command to initialize an package.jsoninformation document, such as an existing package.jsonfile, you can skip npm initthis command.

Installation gulp, as the development of dependency:

npm install --global gulp-cli # 安装
gulp -v #查看安装的 gulp版本
npm install —-save-dev gulp

The above command --save-devpackage name to update the package.jsonfile, update the devDependenciesvalue of the key, to indicate that the project needs to rely gulp.

Dependencies can indicate to the other people involved in the project in project development and production environments in the node module according to the relationship lazy and want more in-depth understanding of it can look Specifying dependencies and devDependencies in a package.json file documents.

Creating Gulpfile file, run gulp

Installation depends

npm install gulp-jshint node-sass gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev 

Installation of the plug-in instructions:

• gulp-jshint: js syntax check
• gulp-sass : sass
• gulp-concat: File Merge (Concatenates files)
• gulp-uglify: js file compression (Minify JavaScript with UglifyJS3.)
• gulp-rename: Rename the file

If you need additional gulp plug-in to npmjs find gulp-the beginning of the package (package), such as: gulp-lessless

New gulpfile file

Now, gulp need to use all the components installed, we need to create a gulpfile file to specify gulp what tasks need to be completed for us.

gulp There are five ways: task, run, watch, src , and dest, the new project root directory named gulpfile.js(or the first letter capitalized Gulpfile.js, like named Makefile) file,

• task: each gulp task (task) is an asynchronous JavaScript function
• run: perform a task (task)
• watch: gulp api The watch()method utilizes monitor file system (file system watcher) globs the task (task) for association.
• src and dest gulp exposed src () and dest () method for processing a file stored on a computer

Note: The above are copied from gulp Chinese network documentation website

The paste the following code:

// 引入 gulp
var gulp = require('gulp'); 

// 引入组件
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

sass.compiler = require('node-sass');

// 检查js脚本
// Link任务会检查js/目录下得js文件有没有报错或警告。
gulp.task('lint', function() {
    gulp.src('./js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// 编译Sass
//Sass任务会编译scss/目录下的scss文件，并把编译完成的css文件保存到/css目录中。
gulp.task('sass', function() {
    gulp.src('./sass/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css'));
});
gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

// 合并，压缩文件
//scripts任务会合并js/目录下得所有得js文件并输出到dist/目录，然后gulp会重命名、压缩合并的文件，也输出到dist/目录。
gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

// 默认任务
gulp.task('default', function(){
    gulp.run('lint', 'sass', 'scripts');

    // 监听文件变化
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'sass', 'scripts');
    });
});
//这时，我们创建了一个基于其他任务的default任务。使用.run()方法关联和运行我们上面定义的任务，使用.watch()方法去监听指定目录的文件变化，当有文件变化时，会运行回调定义的其他任务。

Above gulp configuration can be modified in accordance with the actual situation, add, delete.

In the project directory, run the command:

gulp

To perform defaultthe task (task)

gulp default
gulp sass

References

1. The front end of the build tools gulp introductory tutorial
2. gulp Chinese network
3. npm domestic use Taobao mirroring method