Build fast static page development projects using gulP

  1. Create a monitor directory and create a static directory under the monitor directory to store static resources. The directory contains the following directories and files
  • directorycss scss js fonts img
  • file.babelrc 、.eslintrc,gulpfile.js,package.json
  1. Modify the content of the configuration file

Package. json Final contents of the file

{
  "name": "demo2"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": []."author": ""."license": "ISC"."devDependencies": {
    "babel-core": "^ 6.26.3"."babel-preset-es2015": "^ 6.24.1"."gulp": "^ 3.9.1." "."gulp-autoprefixer": "^ 5.0.0"."gulp-babel": "^" 7.0.1."gulp-clean-css": "^ 4.0.0"."gulp-concat": "^ 2.6.1." "."gulp-connect": "^ 5.5.0"."gulp-eslint": "^ 5.0.0"."gulp-htmlmin": "^ 5.0.1." "."gulp-image": "^ 4.4.1." "."gulp-minify-css": "^ 1"."gulp-rename": "^ 1.4.0." "."gulp-sass": "^ 4.0.1." "."gulp-scss": "^ 1.4.0." "."gulp-uglify": "^ 3.0.1." "."gulp-util": "^ 3.0.8"
  },
  "dependencies": {
    "node-sass": "^ 4.11.0"}}Copy the code

.babelrc Final contents of the file

{
	"presets": ["es2015"]}Copy the code

. Eslintrc File contents

{
    "rules": {"camelcase": 1,
        "comma-dangle": 2."quotes": 0}}Copy the code

// the final contents of gulpfile.js

let gulp 		= require('gulp');
let sass 		= require('gulp-sass');
let babel 		= require('gulp-babel');
let uglify 		= require('gulp-uglify');
let minifyCSS 	= require('gulp-clean-css');
let autoprefixer= require('gulp-autoprefixer');
let concat 		= require('gulp-concat');
let connect 	= require('gulp-connect');
let gutil 		= require('gulp-util'); // Basic toolkitslet rename		= require('gulp-rename'); // Rename the filelet image 		= require('gulp-image'); // Optimize the imagelet eslint 		= require('gulp-eslint'); // check the js codelet htmlmin 	= require('gulp-htmlmin');


const DEST_BASE_URL = '.. /dist'; // Set the packaged directory gulp.task('default'.function(){
	console.log('default task! '); }); // Start the hot update server gulp.task('connect'.function(){
	connect.server({
		root: '.. /dist'// Specify the hot update directory address (relative to the current file) livereload:true, // enable hot update port: 10000 // specify the port number, default is 8080, please modify}); }); // HTML tasks: compress THE HTML, hot update (immediately update the page after modification), output to the target directory gulp.task('html'.function(){
    var options = {
        removeComments: true// Clear HTML comment collapseWhitespace:true, / / compress HTML collapseBooleanAttributes:true// omit the value of the Boolean attribute <input checked="true"/> ==> <input />
        removeEmptyAttributes: true, // remove all Spaces as attribute values <input id="" /> ==> <input />
        removeScriptTypeAttributes: true// Delete <script>type="text/javascript"
        removeStyleLinkTypeAttributes: true// Delete <style> and <link>type="text/css"
        minifyJS: true// Compress the page JS minifyCSS:true// compress the page CSS}; gulp.src('.. /*.html') .pipe(connect.reload()) .pipe(htmlmin(options)) .pipe(gulp.dest(DEST_BASE_URL)); }); // CSS tasks: SCSS compiled to CSS and compressed, automatic prefix completion, hot update gulp.task('css'.function() {
	// doGulp.src (somethings)'./scss/*.scss') / / match'src/scss/*.scss'File * represents all.pipe(sas.sync ().on('error', sass.logError))
	    .pipe(minifyCSS())
	    .pipe(autoprefixer({browsers: 'last 2 versions'})) // Automatic prefix completion, if border-radius {} will be completed to -webkit-border-radius {}.... .pipe(gulp.dest(`./css/`)) .pipe(gulp.dest(`${DEST_BASE_URL}/static/css`)) .pipe(connect.reload()); / / write'dist/css/somefile.js'SRC.scss}); // js tasks: Es6 to ES5, compress, merge, rename, hot update gulp.task('js'.function() {/ /doGulp.src (somethings)'./js/*.js').pipe(eslint()) // syntax check.pipe(Babel ()).pipe(concat())'main.js'))
		.pipe(uglify({ mangle: false }))
		.pipe(rename('main.min.js'(gulp)) / / rename. Pipe. The dest (`. / js / `)). The pipe (gulp. Dest (`${DEST_BASE_URL}/static/js`)) .pipe(connect.reload()); }); // Image task: used to optimize image output to target directory gulp.task('img'.function(){
	gulp.src('./img/*.*').pipe(image()) // Optimize the image. Pipe (gulp.dest('${DEST_BASE_URL}/static/img`)); }); // Automatically execute task gulp.task('auto'.function(){// Monitor the file and do something when the file changes (here you can automatically monitor the SCSS code changes and convert to CSS in real time)'.. /*.html'['html']);
	gulp.watch('./scss/*.scss'['css']);
	gulp.watch('./js/*.js'['js']);
});



gulp.task('default'['html'.'css'.'js'.'img'.'auto'.'connect']);

Copy the code
  1. Operation description: After NPM install is executed, the file structure in the static directory is as follows:
The file name describe
static/.babelrc Babel configuration file, used to convert ES6 to ES5 (similar tools include gulp, webpack..)
static/.eslintrc Js code checking tool ESLint configuration files
static/gulpfile.js Configuration file for the project packaging tool gulp
static/package.js Node package management tool configuration file
static/map_modules Map manipulation related JS files
static/node_modules Dependency package directory in the project
static/scss CSS precompiled language, written in a modular way, through the packaging tool to generate CSS files; SCSS writing can realize modularization, improve code reuse rate and code writing speed
static/fonts Used to store font icon files used in projects
static/img Used to store images used in the project (specifically CSS and ICO ICONS)
static/css Used to store style sheet files
static/libs Used to store third-party libraries, such as jquery, Bootstrap, ArcGIS SDK, etc
static/js Used to store common JS files
  • Gulp build installation package description:
The package name describe
gulp-sass Sass/SCSS compilation
gulp-babel Compile ES6 syntax to ES5 syntax
gulp-uglify Compressing Javascript code
gulp-clean-css Compress CSS
gulp-autoprefixer Automatic prefix completion
gulp-concat Merge multiple files together
gulp-connect Start a websocket service locally and refresh the browser in real time
gulp-util Basic tools
gulp-rename File renaming
gulp-image To optimize the image
gulp-eslint Js code error check
gulp-htmlmin HTML code compression
  1. Command line Execution build command monotor/static directory to start the command line, run: gulp

    If the execution succeeds, you can see the packaged directory dist; Here is the complete package of this project:

Visit http://localhost:10000/ in the browser to see the page effect at this time; Edit CSS \ HTML \js to view page effects in real time; At this point, the environment setup has come to an end;

In fact, there are 4 steps:

  • Create a directory
  • Write configuration files (see above)
  • Install node dependencies (NPM install after package.json file is configured)
  • Executing the gulp command (gulp)